<template>
   <div class="HomepageMin">
       <h3>个人信息</h3>
       <ul>
           <li><p><span>昵称</span>修改</p>
           <div>{{userinfo.nickname}}</div>
           </li>
           <li>
               <p><span>手机号</span>修改</p>
               <div>{{userinfo.mobile}}</div>
           </li>
           <li>
               <p><span>密码</span>修改</p>
               <div>******</div>
           </li>
           <li>
               <img style="width: 150px; height: 150px" :src="userinfo.avatarUrl" alt="">
               <a-upload name="file" :multiple="true" action="/course-api/pcUser/updata/userAvatar" :headers="headers" @change="handleChange">
                   <a-button> <a-icon type="upload" /> 上传头像 </a-button>
               </a-upload>

           </li>
       </ul>
   </div>
</template>

<script>
    import {getUserInfo} from "../api/api";

    export default {
        name: "Homepage",
        methods:{
            handleChange(info) {
                if (info.file.status !== 'uploading') {
                    console.log(info.file, info.fileList);
                }
                if (info.file.status === 'done') {
                    this.$message.success(`上传成功`);
                } else if (info.file.status === 'error') {
                    this.$message.error(`上传失败`);
                }
            },

        },
        data(){
            return {
                userinfo:{},
                headers: {
                    authorization: 'authorization-text',
                },
            }
        },
        created: function () {
            getUserInfo().then(res => {
                console.log(res)
                this.userinfo = res.userInfo
            })
        }
    }
</script>

<style scoped lang="less">
    .HomepageMin {
        h3 {
            color: black;
            font-size: 24px;
        }
        ul {
            margin-left: 30px;
            margin-top: 10px;
            li {
                margin-top: 50px;
               font-size: 12px;
                p{
                    color: #42b983;
                    span {
                        margin-right: 5px;
                        font-size: 18px;
                        color: black;
                    }
                }
                div {
                    line-height: 50px;
                    width: 800px;
                    height: 50px;
                    border-bottom: 1px solid gainsboro;
                    font-size: 18px;
                    color: black;

                }
            }
        }
    }

</style>